<?php 
	$message = $this->message;
?>

<section class="grid_12" style="width: 60%;margin-left: 20%;">
	<div class="block-border" style="margin-bottom: 20px;">
	       <form class="block-content form" id="add_form" method="post" action="">
				
				<h1>ペナルティ</h1>
				
				<fieldset>
					<legend>ペナルティ情報</legend>

					<!-- Message display -->
					<?php if($message):?>
					<ul class="message error no-margin">
						<li><?php echo $message?></li>
					</ul>
					<?php endif;?>

					<p class="inline-label">
						<label for="user">ユーザ</label>
						<?php echo $this->formText("user");?>
					</p>
					
					<p class="inline-label" id="user_info_wrapper" style="display: none;">
						<label for="user_info">ユーザ情報</label>
						<span id="user_info"></span>
						<?php echo $this->formHidden("user_id")?>
					</p>
					
					<p class="inline-label">
						<label for="room_id">会議室</label>
						<?php echo $this->formSelect("room_id", NULL, NULL, $this->room_list)?>
					</p>
					
					<p class="inline-label" style="clear: both;">
						<span class="label">始め時間</span>
						<?php echo $this->formText("start_date", $this->start_date, array('class'=>'date-input', 'style'=>'width: 100px;margin-right: 3px;'))?>
						<?php echo $this->formText("start_time", $this->start_time, array("readonly"=>"true", "style"=>"width:80px"))?>
						<input type="image" src="/images/icons/fugue/clock.png" id="start_time_btn">
					</p>
					
					<p class="inline-label" style="clear: both;">
						<span class="label">終わる時間</span>
						<?php echo $this->formText("end_date", $this->end_date, array('class'=>'date-input', 'style'=>'width: 100px;margin-right: 3px;'))?>
						<?php echo $this->formText("end_time", $this->end_time, array("readonly"=>"true", "style"=>"width:80px"))?>
						<input type="image" src="/images/icons/fugue/clock.png" id="end_time_btn">
					</p>
					
					<p class="inline-label" style="clear: both;">
						<label style="color:red">課徴金</label>
						<span style="color:red"><?php echo number_format(PENALTY_MONEY)?> VND/30分</span>
					</p>
				</fieldset>

				<fieldset class="grey-bg no-margin">
					<p>
						<button type="button" id="order-btn">追加</button>
						<button type="button" id="cancel-btn">キャンセル</button>
					</p>
				</fieldset>
				
			</form>
		</div>
</section>

<link href="/css/jquery.ui.timepicker.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/js/jquery.ui.timepicker.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#cancel-btn").click(function(){
			window.location = "/admin/order/index";
		});

		$("#order-btn").click(function(){
			if(!checkTime(true))
				return false;
			else
				$("#add_form").submit();
				
		});

		$(".date-input").datepicker({ 
			dateFormat: 'yy-mm-dd',
			changeMonth: true,
			changeYear: true,
			showOn: "button",
			buttonImageOnly: true,
			buttonImage: "/images/icons/calendar.gif",
			onClose: function(dateText, inst) {
				
			}
		});
		
		$('#start_time').timepicker({
			showOn: 'button',
			showCloseButton : true,
			button : $("#start_time_btn"),
			showCloseButton : true,
			hours: {
		        starts: 0,
		        ends: 23
		    },
			minutes: {
		        starts: 0,  
		        ends: 30,
		        interval: 30
		    },
		    defaultTime:"8:00"
		});

		$('#end_time').timepicker({
			showOn: 'button',
			showCloseButton : true,
			button : $("#end_time_btn"),
			hours: {
		        starts: 0,
		        ends: 23
		    },
			minutes: {
		        starts: 0,  
		        ends: 30,
		        interval: 30
		    },
		    defaultTime:"10:00"
		});
		
		initUserAutocomplete();
	});

	function initUserAutocomplete(){
		var url = "/autocomplete/user";
		
		$("#user").autocomplete({
			source:url,
			delay:10,
			select:function(event, ui){
				$("#user").val(ui.item.label);
				$(this).next('input').focus();

				$("#user_id").val(ui.item.id);
				$("#user_info_wrapper").css('display', '');

				var data_arr = ui.item.data.split(",");
				var username = data_arr[1];
				var name = data_arr[2];
				var phone = data_arr[3];
				
				$("#user_info").html('<strong>' + username + '</strong>' + "(" + name + "," + phone + ")");
			}
		}).data( "autocomplete" )._renderItem = function( ul, item ) {
				return $( "<li></li>" )
				.data( "item.autocomplete", item )
				.append( "<a>" + item.label + "</a>" )
				.appendTo( ul );
		};
	}

	function checkTime(open_dialog){
		var start_date = $("#start_date").val();
		var end_date = $("#end_date").val();
		var start_time = $("#start_time").val();
		var end_time = $("#end_time").val();

		//check time empty
		if(start_time == "" || end_time == "" || start_date == "" || end_date == ""){
			if(open_dialog)
				openTimeEmptyDialog();
			return false;
		}

		//check time valid
		if((start_date + start_time) >= (end_date + end_time)){
			if(open_dialog)
				openTimeErrDialog();
			
			return false;		
		}
		
		return true;
	}

	function openTimeEmptyDialog()
	{
		$.modal({
			content: $("#time-empty-msg").html(),
			title: '予約時間は正しくない',
			maxWidth: 500,
			buttons: {
				"閉じる": function(win) { win.closeModal(); }
			}
		});
	}

	function openTimeErrDialog()
	{
		$.modal({
			content: $("#time-err-msg").html(),
			title: '予約時間は正しくない',
			maxWidth: 500,
			buttons: {
				"閉じる": function(win) { win.closeModal(); }
			}
		});
	}
</script>

<div id="time-empty-msg" style="display:none">
	<h3>必要項目が入力されていない。</h3>
</div>

<div id="time-err-msg" style="display:none">
	<h3>エンド時間はスタート時間の前です。</h3>
</div>